@import'../../assets/styles/px2rem.scss';

.page_redeem {
  height: 100%;

  .g-hd {
    display: flex;
    justify-content: space-between;
    width: 100%;
    height: px2rem(56);
    background-color: #1dabc5;
    .m-pagenav{
        display: flex;
        margin-right: px2rem(120);
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        .itm{
            margin: px2rem(19) px2rem(18) 0 px2rem(18);
            font-size: 18px;
            color: #fff;
            font-weight: 800;
        }
        .itmm{
            b{
                display: inline-block;
                height: px2rem(28);
                margin: px2rem(14) 0 0;
                border-left: px2rem(1) solid #61c4d7;
                font-size: 0;
            }
        }
        .itms{
            margin: px2rem(19) px2rem(18) 0 px2rem(18);
            font-size: 18px;
            color: #fff;
            font-weight: 800;
        }
    }
    .act{
        display: flex;
        height: px2rem(56);
        width: px2rem(108);
        background-color:#1dabc5;
        position: relative;
        .m-login{
            font-size: 22px;
            padding: 0 px2rem(15);
            line-height: px2rem(56);
            color: #fff;
        }
        span{
            display: block;
            height: px2rem(46);
            position: absolute;
            top: px2rem(12);
            right: px2rem(50);
            color: #61c4d7;
            font-weight: 100;
            font-size: 22px;
        }
        .m-search{
            font-size: 22px;
            padding: 0 px2rem(15);
            line-height: px2rem(56);
            color: #fff;
        }
    }
  }

  .g-bd {
    position: relative;
    padding: 0 0 px2rem(20);
    .m-redeem {
      min-height: px2rem(360);
      padding: px2rem(10) px2rem(10) 0;
      .redeemform {
        margin-top:px2rem(24);
        .u-msg {
          text-align: center;
          color: #999;
          h2 {
            font-size: 16px;
            color: #333;
            margin-bottom: px2rem(20);
          }
          .img {
            margin: px2rem(30) auto px2rem(18);
          }
          .icn-book {
            background: url('http://www.duokan.com/m/static/images/icon-big.png?42202c0be5fd55c66cbc66a721531861') no-repeat;
            background-size: px2rem(130);
            background-position: 0 px2rem(-130);
            width: px2rem(130);
            height: px2rem(130);
          }
        }

        .ui-form {
          .ui-form-item {
            position: relative;
            .u-txt {
              width: 100%;
              height: px2rem(40);
              border: 1px solid #c9c9c9;
              border-radius: px2rem(3);
              padding: 0 px2rem(10);
              font-size: 14px;
              margin-bottom: px2rem(30);
              box-sizing: border-box;
            }
            .ui-form-explain {
              position: absolute;
              bottom: px2rem(5);
              font-size: 12px;
              color: #fc662a;
            }
            .u-btn1 {
              width: 100%;
              box-sizing: border-box;
              display: block;
              height: px2rem(40);
              border-radius: px2rem(3);
              border: 1px solid #fc662a;
              color: #fff;
              line-height: px2rem(40);
              text-align: center;
              background: #fc662a;
            }
          }
        }
      }
    }
  }

  .g-ft{
    padding: 0 px2rem(10) px2rem(20);
    .m-cprt{
        color: #999;
        text-align: center;
        b{
            padding: 0 px2rem(10);
            font-weight: 100;
        }
        .m-crip{
            margin-bottom: px2rem(10);
        }
    }
  }
}

.m-nav{
  width: 100%;
  height: px2rem(235);
  background-color: #fff;
  border-bottom: 1px solid #ccc;
  .m-nav-top{
      display: flex;
      // justify-content: space-around;
      width: 100%;
      height: px2rem(95);
      padding-top: px2rem(30);
      li{
          width: 25%;
          .box{
              border-radius: px2rem(10);
              padding: px2rem(11) 0 0;
              margin: 0 auto;
              display: block;
              width: px2rem(56);
              height: px2rem(45);
              text-decoration: none;
              background-color: #61c4d7;
              i{
                  font-size: px2rem(30);
                  padding: px2rem(14) px2rem(14) px2rem(14) px2rem(14);
                  color: #fff;
              }
              
          }
          span{
              padding-top:px2rem(5);
              display: block;
              font-size: px2rem(16);
              color: #666;
              text-align: center;
          }
      }
  }
  .m-nav-bottom{
      display: flex;
      width: 100%;
      height: px2rem(95);
      // padding-bottom: px2rem(30);
      li{
          width: 25%;
          .box{
              border-radius: px2rem(10);
              padding: px2rem(11) 0 0;
              margin: 0 auto;
              display: block;
              width: px2rem(56);
              height: px2rem(45);
              text-decoration: none;
              background-color: #61c4d7;
              i{
                  font-size: px2rem(30);
                  // padding: px2rem(12);
                  padding: px2rem(14) px2rem(20) px2rem(14) px2rem(13);
                  color: #fff;
              }
              
          }
          span{
              padding-top:px2rem(5);
              display: block;
              font-size: px2rem(16);
              color: #666;
              text-align: center;
          }
      }
  }
}

.am-modal-wrap {
  .am-modal-popup {
    top: px2rem(56);
  }
}

